<template>
  <div class="linliPage">
    <div class="searchBox bgfff">
      <div class="tabsBox">
        <el-tabs v-model="form.type" @tab-click="handleClick">
          <el-tab-pane label="动态" name="1"></el-tab-pane>
          <el-tab-pane label="工作" name="5"></el-tab-pane>
          <el-tab-pane label="闲置" name="3"></el-tab-pane>
          <el-tab-pane label="租房" name="4"></el-tab-pane>
          <el-tab-pane label="攒局" name="6"></el-tab-pane>
        </el-tabs>
      </div>
      <el-form
        :inline="true"
        :model="form"
        ref="formRef"
        class="demo-form-inline"
        size="small"
      >
        <el-row>
          <!-- <el-col :span="6">
            <el-form-item label="用户昵称：" prop="nickName">
              <el-input v-model="form.nickName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item label="姓名：" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12" style="display: flex; justify-content: flex-end">
            <el-form-item style="margin-right: 0">
              <el-button type="primary" size="small" @click="onSubmit"
                >查询</el-button
              >
              <el-button @click="resetForm('formRef')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tablesCard bgfff">
      <div class="tablesCardTop">
        <div class="totalTxt">发布数量:{{ total }}</div>
      </div>
      <el-table :data="tableData" border size="small" style="width: 100%">
        <!-- height="580" -->
        <!-- <el-table-column
          :prop="item.prop"
          :label="item.label"
          align="center"
          :width="item.width"
          v-for="(item, index) in tableColumns[form.type]"
          :key="index"
        >
        
        </el-table-column> -->
        <template v-for="(item, index) in tableColumns[form.type]">
          <el-table-column
            :key="index"
            v-if="item.label == '物品状态'"
            :prop="item.prop"
            :label="item.label"
            align="center"
            :width="item.width"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.cj_status == 1 ? "上架中" : "已下架" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :key="index"
            v-else-if="item.label == '动态内容'"
            :prop="item.prop"
            :label="item.label"
            align="center"
            :width="item.width"
          >
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.dynamic" placement="top">
                <div
                  style="
                    overflow: hidden;
                    display: -webkit-box;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    white-space: normal;
                  "
                >
                  {{ scope.row.dynamic }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            :key="index"
            v-else-if="item.label == '房屋描述'"
            :prop="item.prop"
            :label="item.label"
            align="center"
            :width="item.width"
          >
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.dynamic" placement="top">
                <div
                  style="
                    overflow: hidden;
                    display: -webkit-box;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    white-space: normal;
                  "
                >
                  {{ scope.row.dynamic }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            v-else
            :key="index"
            :prop="item.prop"
            :label="item.label"
            align="center"
            :width="item.width"
          >
          </el-table-column>
        </template>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <div class="">
              <el-link type="primary" @click="onBtns(1, scope.row)"
                >查看</el-link
              >
              <el-divider direction="vertical"></el-divider>

              <el-popover
                :ref="`out-${scope.row.id}`"
                popper-class="myPopover"
                placement="left"
                width="160"
                trigger="click"
              >
                <p class="text">
                  <i class="el-icon el-icon-warning"></i>
                  是否确认下架？
                </p>
                <div class="btnBox">
                  <el-button
                    size="mini"
                    @click="$refs[`out-${scope.row.id}`].doClose()"
                    >取消</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="onBtns(3, scope.row)"
                    >确定</el-button
                  >
                </div>
                <el-link v-if="form.type == 3" type="danger" slot="reference">{{
                  scope.row.cj_status == 1 ? "下架" : "上架"
                }}</el-link></el-popover
              >
              <el-popover
                :ref="`del-${scope.row.id}`"
                popper-class="myPopover"
                placement="left"
                width="160"
                trigger="click"
              >
                <p class="text">
                  <i class="el-icon el-icon-warning"></i>
                  是否确认删除？
                </p>
                <div class="btnBox">
                  <el-button
                    size="mini"
                    @click="$refs[`del-${scope.row.id}`].doClose()"
                    >取消</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="onBtns(2, scope.row)"
                    >确定</el-button
                  >
                </div>
                <el-link type="danger" slot="reference"
                  >删除</el-link
                ></el-popover
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBlock">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :current-page.sync="form.page"
          :page-size="form.limit"
          @size-change="
            (e) => {
              form.limit = e;
              getList();
            }
          "
          @current-change="
            (e) => {
              form.page = e;
              getList();
            }
          "
        >
        </el-pagination>
      </div>
    </div>
    <linliDetails
      v-if="detailShow"
      @handleClose="
        (val) => {
          detailShow = false;
          if (val) {
            getList();
          }
        }
      "
      :dialogVisible="detailShow"
      :typeName="typeName"
      :id="id"
    ></linliDetails>
  </div>
</template>

<script>
import { linliList, dellinli, linliUpStatus } from "@/api/linli.js";
import linliDetails from "./common/details.vue";
export default {
  name: "",
  props: [""],

  data() {
    return {
      form: {
        type: "1",
        userName: "",
        nickName: "",
        page: 1,
        limit: 10,
      },
      tableData: [],
      total: 0,
      projectId: "",
      tableColumns: {
        1: [
          {
            label: "序号",
            prop: "_code",
            width: "80",
          },
          // {
          //   label: "用户昵称",
          //   prop: "nickName",
          //   width: "",
          // },
          {
            label: "姓名",
            prop: "userName",
            width: "",
          },
          {
            label: "类型",
            prop: "type_text",
            width: "",
          },
          {
            label: "动态内容",
            prop: "dynamic",
            width: "",
          },
          {
            label: "点赞数",
            prop: "dz",
            width: "",
          },
          {
            label: "收藏数",
            prop: "sc",
            width: "",
          },
          {
            label: "评论数",
            prop: "pl",
            width: "",
          },
          {
            label: "发布时间",
            prop: "fbDate",
            width: "",
          },
        ],
        5: [
          {
            label: "序号",
            prop: "_code",
            width: "80",
          },
          // {
          //   label: "用户昵称",
          //   prop: "nickName",
          //   width: "",
          // },
          {
            label: "姓名",
            prop: "userName",
            width: "",
          },
          {
            label: "类型",
            prop: "type_text",
            width: "",
          },
          {
            label: "动态内容",
            prop: "dynamic",
            width: "",
          },
          {
            label: "点赞数",
            prop: "dz",
            width: "",
          },
          {
            label: "收藏数",
            prop: "sc",
            width: "",
          },
          {
            label: "评论数",
            prop: "pl",
            width: "",
          },
          {
            label: "发布时间",
            prop: "fbDate",
            width: "",
          },
        ],
        3: [
          {
            label: "序号",
            prop: "_code",
            width: "80",
          },
          // {
          //   label: "用户昵称",
          //   prop: "nickName",
          //   width: "",
          // },
          {
            label: "姓名",
            prop: "userName",
            width: "",
          },
          {
            label: "物品金额（元）",
            prop: "price",
            width: "",
          },
          {
            label: "物品标题",
            prop: "title",
            width: "",
          },
          {
            label: "想要人数",
            prop: "xy",
            width: "",
          },

          {
            label: "发布时间",
            prop: "fbDate",
            width: "",
          },
          {
            label: "物品状态",
            prop: "cj_status",
            width: "",
          },
        ],
        4: [
          {
            label: "序号",
            prop: "_code",
            width: "80",
          },
          // {
          //   label: "用户昵称",
          //   prop: "nickName",
          //   width: "",
          // },
          {
            label: "姓名",
            prop: "userName",
            width: "",
          },
          {
            label: "类型",
            prop: "type_text",
            width: "",
          },
          {
            label: "房屋描述",
            prop: "dynamic",
            width: "",
          },
          {
            label: "点赞数",
            prop: "dz",
            width: "",
          },
          {
            label: "收藏数",
            prop: "sc",
            width: "",
          },
          {
            label: "评论数",
            prop: "pl",
            width: "",
          },
          {
            label: "发布时间",
            prop: "fbDate",
            width: "",
          },
        ],
        6: [
          {
            label: "序号",
            prop: "_code",
            width: "80",
          },
          // {
          //   label: "用户昵称",
          //   prop: "nickName",
          //   width: "",
          // },
          {
            label: "姓名",
            prop: "userName",
            width: "",
          },
          {
            label: "攒局标题",
            prop: "title",
            width: "",
          },
          {
            label: "攒局人数",
            prop: "people_number",
            width: "",
          },
          {
            label: "已报名",
            prop: "bm",
            width: "",
          },
          {
            label: "活动时间",
            prop: "all_date",
            width: "300",
          },
          {
            label: "发布时间",
            prop: "fbDate",
            width: "130",
          },
        ],
      },
      detailShow: false,
      typeName: "",
      id: 0,
    };
  },

  components: { linliDetails },

  computed: {},

  beforeMount() {},

  mounted() {
    this.getList();
  },

  methods: {
    onSubmit() {
      this.getList();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },
    getList() {
      let params = {
        ...this.form,
        type: "",
      };
      if (this.form.type == 1) {
        params.type = [1, 2];
      } else {
        params.type = this.form.type;
      }
      linliList(params).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.page.count;
        }
      });
    },
    onBtns(val, info) {
      this.id = info.id;
      if (val == 1) {
        //查看

        if (this.form.type == 1) {
          //处理动态类型里详情里两种不同展示形式：1：（普通动态/求助）2：（投票）
          this.typeName = "";
          if (info.type == 2) this.typeName = "投票";
        }

        this.detailShow = true;
      } else if (val == 2) {
        //删除
        this.$refs[`del-${info.id}`].doClose();
        dellinli({
          id: info.id,
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.getList();
          }
        });
      } else if (val == 3) {
        //上下架
        console.log(info.cj_status, ">>>>>status");
        this.$refs[`out-${info.id}`].doClose();
        let cj_status = "";
        if (info.cj_status == 1) {
          cj_status = 2;
        } else {
          cj_status = 1;
        }
        linliUpStatus({
          id: info.id,
          cj_status,
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.getList();
          }
        });
      }
    },
    handleClick(val) {
      this.typeName = val.label;
      console.log(this.typeName);
      this.form.page = 1;
      this.getList();
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.linliPage {
  .searchBox {
    margin-bottom: 14px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    height: 147px;
    .tabsBox {
      margin: 10px 0 20px;
      .el-tabs {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .el-tabs__nav-wrap::after {
          background-color: rgba(0, 0, 0, 0);
        }
      }
    }
    /deep/.el-form-item {
      margin-bottom: 0;
      .el-input__inner {
        width: 300px;
      }
    }
  }
  .tablesCard {
  }
}
</style>
